<template>
    <div class="Entrys">
        <div class="group">
            <div class="item" @click="$router.push('/open-vip')">
                <img src="../../../assets/home/icon_huiyuan.png" alt="">
                <span>开通会员</span>
            </div>
            <div class="item" @click="$router.push('/extension')">
                <img src="../../../assets/home/icon_tuiguang.png" alt="">
                <span>我要推广</span>
            </div>
            <div class="item" @click="$router.push('/transfer-account')">
                <img src="../../../assets/home/icon_zhuanzhang.png" alt="">
                <span>转账</span>
            </div>
        </div>
        <div class="group">
            <div class="item" @click="$router.push('/order?type=0')">
                <img src="../../../assets/home/icon_dingdan.png" alt="">
                <span>我的订单</span>
            </div>
            <div class="item" @click="cash">
                <img src="../../../assets/home/icon_tixian.png" alt="">
                <span>提现</span>
            </div>
            <div class="item" @click="buyNode">
                <img src="../../../assets/home/icon_jiedian.png" alt="">
                <span>购买节点</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
    name: 'Entrys'
})
export default class extends Vue {
    private cash(): void {
        this.$common.confirm('提现', '敬请期待!', [
            {text: '确定', color: '#3B83FF', callback: () => {
                }},
        ])
    }
    private buyNode(): void {
        this.$common.confirm('购买节点', '敬请期待!', [
            {text: '确定', color: '#3B83FF', callback: () => {
                }},
        ])
    }
}
</script>

<style scoped lang="less">
.Entrys {
    width: 6.9rem;
    height: 4.2rem;
    background-color: white;
    border-radius: 0.1rem;
    padding: 0.3rem 0.3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0.2rem;
    & .group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        width: 6.3rem;
        & .item {
            width: 1.4rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            border-radius: 0.1rem;
            overflow: hidden;
            position: relative;
            &:after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
            }
            &:active {
                &:after {
                    background-color: rgba(255, 255, 255, .2);
                }
            }
            & img {
                width: 0.94rem;
                height: 0.94rem;
            }
            & span {
                font-size: 0.3rem;
                line-height: 0.6rem;
            }
        }
    }
}
</style>
